<template>
	<view class="Setting">

		<!-- 功能区 -->
		<view class="Setting-abilitys  pr-2">
			<view class="Setting-ability-item flex-between-center  py-2" v-for="item,index in list" :key="index"
				@click="click(item)">
				<view class="Setting-ability-item-left  flex-column d-flex" v-if="item.contentValue">


					<text class="ml-2 mt-2  f-size-14 ">{{item.label}}</text>
					<text class="ml-2 mt-1 f-size-12 color-grey">{{item.contentValue}}</text>
				</view>
				<view class="Setting-ability-item-left  flex-center" v-else>
					<image :src="`/static/icon/${item.path}.png`" mode="" v-if="item.path" class="ml-2"></image>
					<text class="m-2  f-size-14">{{item.label}}</text>
					<text class="m-2  f-size-12 color-grey" v-if="item.centerValue">{{item.centerValue}}</text>
				</view>

				<view class="Setting-ability-item-detail flex-center-center">
					<text class="f-size-14 mr-2 color-grey" v-if="item.value">{{item.value}}</text>
					<up-switch v-if="switchShow" activeColor="#1ed32b" v-model="item.text"></up-switch>
					<image class="" src="/static/icon/goto-black.png" mode="" v-else-if="!buttonShow"></image>
					<up-button type="error" text="delete" size="small" v-else></up-button>

				</view>

				<up-line style="width: 100%;" v-if="index!==list.length-1||lastLine"></up-line>
			</view>
		</view>

	</view>
</template>
<script setup>
	import {
		defineProps
	} from 'vue';


	const props = defineProps({
		list: {
			type: Object
		},
		buttonShow: {
			type: Boolean,
			default: false
		},
		switchShow: {
			type: Boolean,
			default: false
		},
		lastLine: {
			type: Boolean,
			default: true
		}
	})

	function click(item) {
		if (item.url) {
			uni.$to(item.url)
		} else if (item.click) {
			item.click()
		}

	}
</script>

<style lang="scss" scoped>
	.Setting {

		// border: 1px solid red;
		background-color: #ededed;


		.Setting-abilitys {

			background-color: #fff;

			.Setting-ability-item {
				flex-wrap: wrap;
				// border: 1px solid red;

				.Setting-ability-item-left {
					image {
						width: 45rpx;
						height: 45rpx;
					}
				}

				.Setting-ability-item-detail {
					image {
						width: 35rpx;
						height: 35rpx;
					}

				}
			}
		}
	}
</style>